<template>
  <div class="py-24 bd-filt-6 bgc-lightgrey">
    <RichTextEditor class="px-20 mb-24" :content.sync="config.content" />
    <BorderSetting v-model="model" />
    <el-form-item label="卡片底色" class="mt-24">
      <ColorSetting v-model="style.backgroundColor" />
    </el-form-item>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import RichTextEditor from '@/components/RichTextEditor';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import ColorSetting from '../../../settingComponent/ColorSetting.vue';
  export default {
    components: { RichTextEditor, BorderSetting, ColorSetting },
    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      ...mapGetters('component', ['previewer']),
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .layout-setting ::v-deep {
    width: 360px;

    .label {
      width: 24px;
      text-align: center;
    }

    .el-input-number--small .el-input {
      .el-input__inner {
        border-color: map-get($bgColors, 'lightgrey');
        background-color: map-get($bgColors, 'lightgrey');

        &:focus {
          border-color: map-get($bdColors, 'theme');
          background-color: map-get($bgColors, 'white');
        }
      }
    }
  }
</style>
